<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/Redeem.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<!--!!!!!!!!!!!增加reset-->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>

	<body>
		<div class="web">
			<ul>
				<li>请输入兑换码</li>
				<li><input type="text" /></li>
				<li><span class="confirm button">确&nbsp;认</span></li>
			</ul>
			<div class="bot">
				<button></button>
			</div>
			<div class="mask">
				<div class="box">
					<div class="result success animated bounceIn">
						<ul>
							<li><span class="remove">X</span></li>
							<li><span>兑换成功!</span></li>
						</ul>
					</div>
					<div class="result fail animated bounceIn">
						<ul>
							<li><span><img src="images/close_icon.jpg"/></span></li>
							<li><span>兑换失败!</span></li>
							<li><button>重新输入</button></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(".web .confirm").on("click",function(){
				if($(".web ul:first input").val()!=""){
					$(".mask, .success").css("display","block");
				}else{
					$(".mask, .fail").css("display","block");
				}
			})
			$(".result .remove").on("click",function(){
				$(".mask").css("display","none");
			})
			$(".result.fail li:last button").on("click",function(){
				$(".mask").css("display","none");
				$(".web ul:first-of-type input").focus();
			})
			$(".result.fail li:first span").on("click",function(){
				$(".mask").css("display","none");
			})
			$(".bot").on("click",function(){
				location.href="index.html";
			})
		</script>
	</body>

</html>